<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">
    <script src="jq/jquery2.0/jquery-2.0.0.js"></script>
    <script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script>
`   <style>
        .d1{
            width:300px;
            height: 300px;
            background: red;
        }
    </style>
</head>
<body>

    <!-- 按钮 -->
    <a class="btn btn-default" href="#" role="button">Link</a>
    <button class="btn btn-primary  btn-lg" type="submit">Button</button>
    <input class="btn btn-success" type="button" value="Input">
    <input class="btn btn-info btn-sm" type="submit" value="Submit">
    <input class="btn btn-warning" type="submit" value="Submit">
    <input class="btn btn-danger btn-xs" type="submit" value="Submit">

    <!-- 文本颜色 -->
    <p class="text-muted">鞍山市所所</p>
    <p class="text-primary">鞍山市所所</p>
    <p class="text-success">鞍山市所所</p>
    <p class="text-info">鞍山市所所</p>
    <p class="text-warning">鞍山市所所</p>
    <p class="text-danger">鞍山市所所</p>

    <!-- 响应式工具 -->
    <div class="d1 hidden-sm hidden-lg">小屏幕和大屏幕的时候隐藏</div>
</body>
</html>